<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>角色授权</title>
        <% include("/common/common_css_js.html"){} %>
    </head>
    <body>

        <div class = "mini-fit" style="display: flex;flex-direction: row">

            <div style="width: 30%;height: 100%;border: 1px solid green;">
                <div id="roleForm" class="uc-toolbaroverflow width100" _borderStyle="border-top:0;" style="margin-bottom: 5px;padding-left: 5px;height: 30px;">
                    <span>角色名称：</span>
                    <input id="keyRoleName" name="keyRoleName" class="mini-textbox" style="width:250px" emptyText="角色名称" required="false" requiredErrorText="角色名称不能为空"/>
                    <a class="mini-button" iconCls="icon-search" onclick="search()">查询</a>
                </div>
                <div class = "mini-fit">
                    <div id="roleDatagrid" class="mini-datagrid"
                         style="width: 100%; height: 100%;"
                         url="${base}/pages/system_maintain/role/queryRoleList" idField="id"
                         showPager="true" pageSize="20" sizeList="[10,20,30,50,100]"
                         allowResize="true"
                         allowCellWrap="true"
                         multiSelect = "false"
                         onrowclick="roleDatagridRowClick"
                    >
                        <div property="columns">
                            <div field="name" width="70" headerAlign="center" align="left" allowSort="true">角色名称</div>
                            <div field="comment" width="140" headerAlign="center" align="left" allowSort="true">角色说明</div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="width: 2px"></div>

            <div style="width: 25%;height: 100%;border: 1px solid green;" >
                <div class="uc-toolbaroverflow width100" _borderStyle="border-top:0;" style="margin-bottom: 5px;padding-left: 5px;height: 30px;">
                    <span>菜单授权：</span>
                    <a class="mini-button" iconCls="icon-ok" onclick="saveRoleMenuPermission()">保存菜单授权</a>
                </div>
                <div class = "mini-fit">

                    <!-- 显示对应的菜单树 -->
                    <ul id="menuTree" class="mini-tree" url="${base}/pages/system_maintain/permission/loadMenuTree" style="width:100%;height:100%;"
                        showTreeIcon="true" textField="name" idField="id" resultAsTree="false"  expandOnLoad="true" autoCheckParent="true"
                        showCheckBox="true" checkRecursive="true"  onnodecheck="nodeChcek">
                    </ul>

                </div>
            </div>

            <div style="width: 2px"></div>

            <div style="width: 45%;height: 100%;border: 1px solid green;">
                <div class="uc-toolbaroverflow width100" _borderStyle="border-top:0;" style="margin-bottom: 5px;padding-left: 5px;height: 30px;">
                    <span>按钮资源授权：</span>
                    <a class="mini-button" iconCls="icon-ok" onclick="saveRoleButtonPermission()">保存</a>
                </div>
                <div class = "mini-fit">
                    <div id="roleButtonDatagrid" class="mini-datagrid"
                         style="width: 100%; height: 100%;"
                         idField="id"
                         showPager="false"
                         multiSelect = "true" allowResize="false">
                        <div property="columns">
                            <div type="checkcolumn" ></div>
                            <div field="name" width="140" headerAlign="center" align="center" allowSort="true">资源名称</div>
                            <div field="resourceTypeId" width="140" headerAlign="center" align="center" allowSort="true" data-options='{cacheName:"sysDic"}' renderer="commonRender">资源类型</div>
                            <div field="menuName" width="140" headerAlign="center" align="center" allowSort="true" >归属模块</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <script type="text/javascript">
            mini.parse();

            let roleForm = new mini.Form("#roleForm");

            let keyRoleName = mini.get("keyRoleName");

            let roleDatagrid = mini.get("roleDatagrid");

            let menuTree = mini.get("menuTree");

            let roleButtonDatagrid = mini.get("roleButtonDatagrid");


            let permissionType = {menu:601,button:602};


            let permissionArray = [];

            $(function () {
                // 加载角色数据
                roleDatagrid.load();

                // 加载树形结构
                menuTree.load();

                // 加载所有可授权资源备用
                permissionArray = public_getServerData("${base}/pages/system_maintain/permission/queryNoPage?no=1");
                /**
                 * id: "439874861879676946"
                 menuId: "01100"
                 menuName: "数据字典"
                 name: "新建一级节点"
                 permissionCode: "xtdic:addLevel1Node"
                 pid: null
                 pids: null
                 resourceTypeId: 602
                 */
            });

            /**
             * 根据条件查找
             */
            function search() {
                let queryFormData = roleForm.getData(true);
                roleDatagrid.load(queryFormData);
            }

            let roleMenuPermissionIdsArray = [];
            let roleNonMenuPermissionIdsArray = [];

            /**
             * 节点是否选中事件,需要处理的是当选中父节点时，需要把下面所有节点都要遍历一下，如果果叶节点则不需要遍历
             */
            function nodeChcek(e){

                // 1.遍历所有节点
                let selectedMenuNodeArray = [];
                // 获取根节点
                let rootNode = menuTree.getRootNode();
                // 遍历选择中节点
                menuTree.cascadeChild(rootNode, function(node){
                    if(menuTree.isCheckedNode(node)){
                        selectedMenuNodeArray.push(node);
                    }
                });

                // 2.根据所有选中的节点，遍历permissionArray，把按钮可用的权限节点选择出来
                let roleButtonDatagridRowArray = [];
                for(let menuNode of selectedMenuNodeArray){
                    for(let rowObj of permissionArray){
                        if(rowObj.resourceTypeId == permissionType.button && rowObj.menuId == menuNode.id){
                            roleButtonDatagridRowArray.push(rowObj);
                        }
                    }
                }

                // 3.清空roleButtonDatagrid
                roleButtonDatagrid.clearRows();

                // 4.重新绑定
                for(let obj of roleButtonDatagridRowArray){
                    // 添加行
                    roleButtonDatagrid.addRow(obj);
                    // 判断是否已经选中的
                    let selectFlag = false;
                    for(let permissionId of roleNonMenuPermissionIdsArray){
                        if(permissionId == obj.id){
                            selectFlag = true;
                            break;
                        }
                    }
                    // 设置是否默认选中
                    if(selectFlag){
                        roleButtonDatagrid.select(obj,false);
                    }
                }
            }

            /**
             * 根据角色加载角色的最新资源
             */
            function loadRolePermission(roleIdValue){
                // 1.根据角色加载角色对应的所有的授权资源
                let ret = public_getServerData("${base}/pages/system_maintain/role_permission/queryRolePermissionPojoByRoleId?roleId=" + roleIdValue);

                if(public_isEmpty(ret.data)){
                    // 清空之前的选择
                    menuTree.setValue();
                    return false;
                }

                // 2.分离授权资源，因为资源中有菜单与非菜单资源
                let rolePermissionArray = ret.data;

                // 清空
                roleMenuPermissionIdsArray.splice(0,roleMenuPermissionIdsArray.length);
                roleNonMenuPermissionIdsArray.splice(0,roleNonMenuPermissionIdsArray.length);

                for(let obj of rolePermissionArray){
                    if(obj.resourceTypeId = permissionType.menu && obj.permissionId.length<=5){
                        roleMenuPermissionIdsArray.push(obj.permissionId);
                    }
                    else{
                        roleNonMenuPermissionIdsArray.push(obj.permissionId);
                    }
                }
                return  true;
            }



            /**
             * 角色列表被点击时事件响应
             */
            function roleDatagridRowClick(e) {

                // 选中的角色ID值
                let selectedRoleIdValue = e.record.id;

                // 清空
                roleButtonDatagrid.clearRows();

                // 加载角色资源
                let flag = loadRolePermission(selectedRoleIdValue);
                if(!flag){
                    return ;
                }

                // 3.设置角色菜单资源选中的值
                menuTree.setValue(roleMenuPermissionIdsArray)

                // 4.根据角色对应的菜单ID 过滤所有对应的资源到roleButtonDatagrid
                for(let objId of roleMenuPermissionIdsArray){
                    for(let obj of permissionArray){
                        if(objId == obj.menuId && obj.resourceTypeId == permissionType.button){

                            roleButtonDatagrid.addRow(obj);
                            let selectFlag = false;
                            for(let permissionId of roleNonMenuPermissionIdsArray){
                                if(permissionId == obj.id){
                                    selectFlag = true;
                                    break;
                                }
                            }
                            // 设置是否默认选中
                            if(selectFlag){
                                roleButtonDatagrid.select(obj,false);
                            }

                        }
                    }
                }

            }

            /**
             * 保存角色菜单资源
             */
            function saveRoleMenuPermission() {

                let selectedRow = roleDatagrid.getSelected();

                if(public_isEmpty(selectedRow)){
                    showAlert("没有选择角色,无法做菜单授权!");
                    return;
                }

                let selectedMenuNodeArray = [];
                // 获取根节点
                let rootNode = menuTree.getRootNode();
                // 遍历选择中节点
                menuTree.cascadeChild(rootNode, function(node){
                    if(menuTree.isCheckedNode(node)){
                         selectedMenuNodeArray.push(node);
                    }
                });

                if(selectedMenuNodeArray.length<=0){
                    showAlert("没有为【" + selectedRow.name + "】 角色指定任何菜单资源，无法进行角色菜单授权操作!");
                    return;
                }

                // 下面可以进行保存操作
                mini.confirm("确定为【" + selectedRow.name + "】角色指定新的菜单授权资源？\n\r 所有该角色的用户的菜单授权资源将会被更新", "角色资源授权提示",
                    function(action) {
                        if (action == "ok") {
                            let roleMenuPermission = {roleId:selectedRow.id,permissionArray:selectedMenuNodeArray};
                            let ret = public_getServerData("${base}/pages/system_maintain/role_permission/roleMenuPermission",roleMenuPermission);
                            showAlert(ret.message);
                        }
                    });
            }


            /**
             * 按钮授权资源保存
             */
            function saveRoleButtonPermission(){
                // 1.选择当前选中的角色
                let roleIdRowObj = roleDatagrid.getSelected();
                if(public_isEmpty(roleIdRowObj)){
                    showAlert("没有选择角色!");
                    return;
                }

                // 2.选择角色对应的按钮权限资源
                let selectedRows = roleButtonDatagrid.getSelecteds();
                if(public_isEmpty(selectedRows)){
                    showAlert("没有选择角色【" + roleIdRowObj.name + "】需要授权的资源对象!");
                    return;
                }

                // 3.保存角色菜单资源
                mini.confirm("确定为【" + roleIdRowObj.name + "】角色保存模块按钮授权资源？\r\n 所有该角色的用户的相应模块授权资源将会被更新", "角色资源授权提示",
                    function(action) {
                        if (action == "ok") {
                            // 4.构建角色授权资源对象
                            let rolePermissionObj = {roleId:roleIdRowObj.id,rolePermission:selectedRows};
                            let ret = public_getServerData("${base}/pages/system_maintain/role_permission/saveRoleButtonPermission",rolePermissionObj);
                            showAlert(ret.message,function (){
                                if(ret.ok){
                                    loadRolePermission(roleIdRowObj.id);
                                }
                            });
                        }
                    });



            }


        </script>

    </body>
</html>